<template>
	<view v-if="cont.name" class="container" :style="theme">
		<view class="head">
			<image v-if="cont.img_url && type!=2" class="banner" :src="cont.img_url" mode="widthFix"></image>
			<image v-if="type == 2" class="banner" :src="ossHost+'/member/20200412/hb1.png'" mode="widthFix"></image>
			<view class="head-cont">
				<view class="title">{{cont.name}}</view>
				<view class="tip flex-cb">
					<view><text>{{cont.price}}</text>积分</view>
					<view v-if="cont.stock">库存：{{cont.stock}}</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="bt">商品详情</view>
			<u-parse :content="cont.info"></u-parse>
		</view>
		<view class="bottomState flex-cb">
			<view class="jifen">我的积分：<text>{{cont.integral || 0}}</text></view>
			<view>
				<view class="registerNow" @click="dhBtn">立即兑换</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				type: '',
				cont: {}
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.type = ops.type
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			dhBtn() {
				if (this.cont.stock && this.cont.stock < 1) {
					this.$app.showToast('当前商品库存不足')
					return false
				}
				if (this.cont.price > this.cont.integral) {
					this.$app.showToast('当前积分不足')
					return false
				}
				if(this.type == 2) {
					this.$app.ajax({
						api: this.$api.goodsRedeem(),
						data: {
							param: {
								memberId: this.userInfo.id,
								goodsId: this.id,
								venueId: this.venueId
							}
						},
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.$app.showToast('兑换成功')
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						}
					}).catch(() => {})
				} else {
					this.jump2('/pages/integral/pay?id=',this.id)
				}
				
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.goodsInfo(),
					data: {
						param: {
							memberId: this.userInfo.id,
							id: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.cont = res.record
						this.cont.info = res.record.info ? res.record.info.replace(/\<img/g,
							'<img style="vertical-align: top;"') : ''
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 80rpx;
	}

	.head {
		background-color: #ffff;
		margin-bottom: 24rpx;
	}

	.banner {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-items {
		height: 100%;
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.swiper-item image {
		width: 100%;
	}

	.head-cont {
		padding: 30rpx;
	}

	.head-cont .title {
		font-size: 34rpx;
		font-weight: 500;
		color: #222222;
		margin-bottom: 20rpx;
		line-height: 44rpx;
	}

	.tip {
		color: #555555;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.tip text {
		font-size: 40rpx;
		margin-right: 10rpx;
		font-weight: bolder;
		color: $red;
	}

	.info {
		font-size: 24rpx;
		font-weight: 400;
		color: #555555;
		margin-bottom: 20rpx;
		line-height: 36rpx;
	}

	.card {
		background-color: #ffff;
		padding: 30rpx;
		margin-bottom: 24rpx;

		.bt {
			color: #222222;
			line-height: 1.5;
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 30rpx;
		}
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.bottomState .jifen {
		color: #222222;
		font-size: 28rpx;
	}

	.bottomState .jifen text {
		font-size: 32rpx;
		font-weight: bolder;
		color: $red;
	}

	.registerNow {
		height: 68rpx;
		padding: 0 34rpx;
		color: #fff;
		background-color: $color;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
		margin-left: 20rpx;
	}
</style>